<style>

</style>

<div>
  <span style="color: black; font-size: 20px;font-weight: bold;">Deferrable Views</span>
</div>
<div class="content">
  <p>==========使用defer延迟加载组件，浏览器空闲时候加载</p>
  @defer {
    <app-comment-details/>
  }

  <p>===========添加placeholder</p>
  @defer (on viewport) { <!--Add a viewport trigger-->
    <app-comment/>
  } @placeholder (minimum 5000ms) {
    <p>我先占位，5000毫秒数后，在加载正式内容</p>
  }

  <p>============添加loading</p>
  <!--@defer {
    <app-comment-details/>
  }@loading(after 200ms; minimum 3s) {
    &lt;!&ndash;加载占位，类似placeholder&ndash;&gt;
    <p>占位，加载中……</p>
    <img alt="loading..." src="assets/img/loading.gif" />
  }-->
  @defer {
    <app-comment-details/>
  } @placeholder {
    <p>占位，placeholder</p>
  }
  @loading(minimum 3s) {<!--延迟3s后显示内容-->
    <!--加载占位，类似placeholder-->
    <p>占位，加载中……</p>
    <img alt="loading..." src="assets/img/loading.gif" />
  }

  <p>=============添加error</p>

  @defer{
    <app-comment-details/>
  } @error {
    <p>延迟加载失败，，占位错误显示</p>
  }
</div>
